<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标准规范</title>
    <meta name="renderer" content="webkit">
    <#--   <link rel="stylesheet" href="${re.contextPath}/plugin/lay/layui/css/layui.css">-->
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--layui-dropdown-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/dropdown_2.3.3/dropdown.css">
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!-- 公共配置第三方组件 -->
    <script type="text/javascript">
        layui.config({
            version: false,
            debug: false,
            base: "${re.contextPath}/plugin/layui/dropdown_2.3.3/"
        })
    </script>
    <style>
        .select ul li:nth-child(4) > .ml10,
        .select ul li:nth-child(5) > .ml10 {
            margin-left: 5px;
        }

        .select ul li:nth-child(4) .money {
            width: 90%;
        }

        .select ul li:nth-child(5) .money {
            width: 71%;
        }

        .select ul li:nth-child(4) > div {
            width: 77%;
        }

        .select ul li:nth-child(4) .money > div {
            width: 48%;
        }

        .select ul li:nth-child(5) .money > div {
            width: 43%;
        }

        .select ul li:nth-child(4) .money > div input {
            width: 95%;
        }

        .select ul li:nth-child(5) .money > div input {
            width: 60%;
        }

        .layu-menu-item-wrap {
            float: none !important;
            width: 100% !important;
        }

        .screening ul li input {
            width: 65%;
            padding-left: 5%;
            border: 0;
        }

        .screening ul li > select {
            border: 1px solid #DDDDDD;
        }

        .screening .money div {
            border: 1px solid #DDDDDD;
        }
    </style>
</head>
<body>
<div class="clearfix" style="margin-top: 20px;margin-left: 30px;margin-right: 30px">
    <div class="whitebg">
        <div style="background-color: #DDEAFF;display: flex;padding: 20px">
            <div style="height: 30px;background-color: #00a0e9;width: 5px;">
            </div>
            <div style="height: 30px;margin-left: 20px;" class="maxfont">
                ${projectInfo.projectName}
            </div>
        </div>
        <div style="padding: 20px">
            <div style="display: flex">
<#--                <div style="width: 40%"><label class="gary fontitem">项目名称：</label><span class="fontitemshow">${projectInfo.id}</span></div>-->
<#--                <div style="width: 30%"><label class="gary fontitem">项目名称：</label><span class="fontitemshow">${projectInfo.projectName}</span></div>-->
                <div style="width: 25%"><label class="gary fontitem">项目类型：${projectInfo.projectTypeName}</label></div>
                <div style="width: 25%"><label class="gary fontitem">投资额：${projectInfo.tzMoney}</label></div>
                <div style="width: 25%"><label class="gary fontitem">总工期：${projectInfo.totalDate}</label></div>
                <div style="width: 25%"><label class="gary fontitem">标段数量：${fbnum}</label></div>
            </div>
            <div style="display: flex">


            </div>
            <div style="display: flex">

            </div>
        </div>
    </div>

    <div class="whitebg" style="margin-top: 20px">
        <div class="list-container">
            <div class="fixed-li">
                <li class="selectli"  fbId="" onclick="clickzt(this)">总体进度
                </li>
            </div>
            <ul class="liui">
                <#list listfb as vo>
                    <li class="selectli"  fbId="${vo.id}" title="${vo.code}" onclick="clickfb(this)">${vo.code}</li>
                </#list>
            </ul>
        </div>


    </div>

    <div class="whitebg" style="margin-top: 20px; display: flex; justify-content: space-between;">

        <div style="flex: 1; margin-right: 10px;">
            <table id="stageList" style="height: 300px;width:100%" class="layui-hide" lay-filter="stage"
                   height="300px"></table>
        </div>
        <div style="flex: 1; margin-right: 10px;">
            <table id="milepostList" style="height: 300px;width:100%" class="layui-hide" lay-filter="milepost"></table>
        </div>

    </div>


</div>

</div>

<style>
    /* 容器样式 */
    .whitebg {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .maxfont{
        font-size: 20px;
        font-weight: bolder;
        overflow: hidden;
        white-space: nowrap;       /* 防止文字换行 */
        overflow: hidden;          /* 隐藏溢出的内容 */
        text-overflow: ellipsis;   /* 溢出部分显示为省略号 */
    }
    .fontitem{
        font-size: 18px;
        color: #0C0C0C;
    }
    .fontitemshow{
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;       /* 防止文字换行 */
        overflow: hidden;          /* 隐藏溢出的内容 */
        text-overflow: ellipsis;   /* 溢出部分显示为省略号 */
        display: inline-block;     /* 确保 span 元素可以设置宽度 */
        width: 500px;

    }
    .list-container {
        display: flex;
        align-items: flex-start;
        font-size: 20px;

    }

    /* 固定的 li 样式 */
    .fixed-li {
        position: sticky;
        left: 0;
        z-index: 1;
        margin-right: 10px;
    }

    .liui {
        display: flex;
        overflow-x: auto;
    }

    /* 基本样式 */
    .selectli {
        padding: 10px;
        cursor: pointer;
        line-height: 60px;
        min-width: 150px;
        max-width: 300px;
        min-height: 60px;
        background-color: #f9f9f9;
        transition: background-color 0.3s;
        display: inline-block;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;


    }
    .selectli:hover {
        background-color: #e0e0e0;
    }

    .selectli.active {
        border-bottom: 5px solid #0A79FF;
        color: #0A79FF;
        background-color: #d9e4ff;
    }

    /* 滚动条样式 */
    .selectli::-webkit-scrollbar {
        height: 8px;
        background-color: #f1f1f1;
    }

    .selectli::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Firefox */
    .selectli {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    /* IE 和 Edge */
    .selectli {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }


</Style>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/html" id="toolBarStage">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="editStage">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delStage">删除</a>
</script>
<script type="text/html" id="toolBarMilepost">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="editMilepost">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delMilepost">删除</a>
</script>
<script type="text/html" id="stageToolbar">
    <div class="layui-btn-container">

        <@shiro.hasPermission name ="view:process">
        <button class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="viewstageprocess">查看进度</button>
        </@shiro.hasPermission>
        <@shiro.hasPermission name ="add:process">
        <button class="layui-btn layui-btn-sm" lay-event="addAStage">新增</button>
        </@shiro.hasPermission>
    </div>
</script>
<script type="text/html" id="milepostToolbar">
    <div class="layui-btn-container">
        <@shiro.hasPermission name ="add:process">
        <button class="layui-btn layui-btn-sm" lay-event="addMilepost">新增</button>
        </@shiro.hasPermission>
    </div>
</script>
<script>
    $("div[lay-event='LAYTABLE_COLS']").hide()
    $("div[lay-event='LAYTABLE_EXPORT']").hide()
    $("div[lay-event='LAYTABLE_PRINT']").hide()
    var fbId = "";
    function clickfb(element) {
        const selectlis = document.querySelectorAll('.selectli');

        // 移除所有 selectli 元素的 active 类
        selectlis.forEach(li => {
            li.classList.remove('active');
        });
        element.classList.add('active');
        //获取元素 fbid 属性的值
        fbId= element.getAttribute('fbId');
        //动态修改表头
        updateTalbeClumn("2")
        setTimeout(function () {
            queryStage('2')
            queryMilepost('2324434343')
        }, 20);


        //
        selectedRowId="";
    }
    // 页面加载完毕，执行点击clickzt
    $(function () {
        // 两秒后执行
        document.querySelector('.selectli').classList.add('active');
        setTimeout(function () {
            fbId=""
            console.log("88888888888888888888");
            queryStage('1')
            queryMilepost('2324434343')
        }, 100);

    })

    function clickzt (element){
        // 总体进度
        const selectlis = document.querySelectorAll('.selectli');
        // 移除所有 selectli 元素的 active 类
        selectlis.forEach(li => {
            li.classList.remove('active');
        });
        element.classList.add('active');
        //获取元素 fbid 属性的值
        fbId= element.getAttribute('fbid');
        //动态修改表头
        updateTalbeClumn("1")
        // 500 毫秒后执行
        setTimeout(function () {
            queryStage('1')
            queryMilepost('2324434343')
        }, 20);

        selectedRowId="";
    }

    function   updateTalbeClumn(type){
        var newCols;
        if(type=='1'){
            newCols=[[
                {field: 'orderNum', title: '序号', width: '15%', sort: false},
                {field: 'stageName', title: '标段名称', width:'25%', sort: false},
                {field: 'startDateStr', title: '开始时间', width: '20%', sort: false},
                {field: 'endDateStr', title: '结束时间', width: '20%',sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarStage"}
            ]];
        }else{
            newCols=[[
                {field: 'orderNum', title: '序号', width: '15%', sort: false},
                {field: 'stageName', title: '项目阶段', width:'25%', sort: false},
                {field: 'startDateStr', title: '开始时间', width: '20%', sort: false},
                {field: 'endDateStr', title: '结束时间', width: '20%',sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarStage"}
            ]];
        }

        // 重新渲染表格
        table.reload('stageList', {
            cols: newCols
        });


    }

    var type = "${type}";
    var projectId = '${projectInfo.id}';
    var layer;
    var form = layui.form;
    var table = null;
    var tableIns = null;
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element, dropdown;
    layui.use(['element', 'dropdown'], function () {
        element = layui.element , dropdown = layui.dropdown;
    });
    var selectedRowId = null;
  var parentId=''
    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        var newCols=[[
            {field: 'orderNum', title: '序号', width: '15%', sort: false},
            {field: 'stageName', title: '标段名称', width:'25%', sort: false},
            {field: 'startDateStr', title: '开始时间', width: '20%', sort: false},
            {field: 'endDateStr', title: '结束时间', width: '20%',sort: false},
            {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarStage"}
        ]];
        stageTableIns = table.render({
            id: 'stageList',
            elem: '#stageList',
            url: '/project/projectManager/projectJd/showJdStageList?projectId='+projectId+'&type=1',
            toolbar: '#stageToolbar',
            page: true,
            cols: newCols,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
                //把有这个属性的 lay-event="LAYTABLE_COLS" 标签隐藏
                $("div[lay-event='LAYTABLE_COLS']").hide()
                $("div[lay-event='LAYTABLE_EXPORT']").hide()
                $("div[lay-event='LAYTABLE_PRINT']").hide()


            }
        });

        table.on('checkbox(stage)', function (obj) {
            console.log(obj)
        });
        table.on('tool(stage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detailStage') {
                layer.alert('您所查看的项目阶段是：[<label style="color: #00AA91;">' + data.stageName + '</label>]')
            }
            if (obj.event === 'editStage') {
                viewEditStage(data.id,'1');
            }
            if (obj.event === 'delStage') {
                layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.stageName + '</label>]数据?', function () {
                    delStage(data.id,'1');
                });
            }
        })
        table.on('row(stage)', function (obj) {
            var data = obj.data;
             queryMilepost(data.id)
            // stageId = data.id
            selectedRowId = data.id;
            // //标注选中样式
             obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        table.on('toolbar(stage)', function (obj) {
            switch (obj.event) {
                case 'addAStage':
                    addStage();
                    break;
                 case 'viewstageprocess':
                   viewstageprocess();

            }
            ;
        })
    })


    function delStage(id,type) {
        layerAjax('/project/projectManager/projectJd/deleteJb', {ids:id}, '', function (d) {
            if (d.flag == true) {
                if(type=='1'){
                    selectedRowId="";
                    stageTableIns.reload();
                    milepostTableIns.reload();
                    // layui.table.reload('stageList');
                    // layui.table.reload('milepostList');
                }else{
                    milepostTableIns.reload();
                }


                layer.msg("操作成功",{icon: 1});
            } else {
                layer.msg(d.msg, {icon: 1});
            }
            console.log(d);
        });
    }


    function viewstageprocess() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        layer.open({
            id: 'stage-view-process',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "查看进度",
            content: '/project/projectManager/projectJd/viewstageprocess?projectId='+projectId+'&fbId='+fbId,
            yes: function(){

            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                stageTableIns.reload();
            }
        });
    }
    function addStage() {
        console.log(projectId,"===================================");
        var w = 800;
        var h = 600;
        layer.open({
            id: 'stage-add',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "新增项目阶段",
            content: '/project/projectManager/projectJd/addJdStagePage?projectId='+projectId+'&fbId='+fbId,
            yes: function(){

            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                stageTableIns.reload();
            }
        });
    }
    function viewEditStage(id,type) {
        // var w = ($(window).width() * 0.9);
        // var h = ($(window).height() - 50);
        var w = 800;
        var h = 600;
        layer.open({
            id: 'stage-update',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "更新项目阶段",
            content: '/project/projectManager/projectJd/updateJdStagePage?id=' + id,
            success: function (layero) {
            },
            end: function () {
                if(type==1){
                    stageTableIns.reload();
                }else{
                    milepostTableIns.reload();
                }

            }
        });
    }

   // 里程
    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        milepostTableIns = table.render({
            id: 'milepostList',
            elem: '#milepostList',
            url: '/project/projectManager/projectJd/showJdStageList?projectId='+projectId+'&type=2',
            toolbar: '#milepostToolbar',
            autoSort: false,
            cols: [[
                // {field: 'orderNum', title: '序号', width: '70', sort: false},
                // {field: 'stageName', title: '项目阶段', width:'800', sort: false},
                // {field: 'startDateStr', title: '开始时间', width: '120', sort: false},
                // {field: 'endDateStr', title: '结束时间', width: '120',sort: false},
                // {field: 'remark', title: '操作', width: '120', toolbar: "#toolBarStage"}
                {field: 'orderNum', title: '序号', width: '10%', sort: false},
                {field: 'stageName', title: '子阶段', width:'30%', sort: false},
                {field: 'startDateStr', title: '开始时间', width: '20%', sort: false},
                {field: 'endDateStr', title: '结束时间', width: '20%',sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarMilepost"}
            ]],
            page: false,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
                //把有这个属性的 lay-event="LAYTABLE_COLS" 标签隐藏
                $("div[lay-event='LAYTABLE_COLS']").hide()
                $("div[lay-event='LAYTABLE_EXPORT']").hide()
                $("div[lay-event='LAYTABLE_PRINT']").hide()
            }

        });


        table.on('tool(milepost)', function (obj) {
            var data = obj.data;
             if(obj.event === 'editMilepost') {
                viewEditStage(data.id,'2');
            }else if (obj.event === 'delMilepost') {
                layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.stageName + '</label>]数据?', function () {
                    delStage(data.id,'2');
                });
            }
        });
        table.on('toolbar(milepost)',function(obj){
            switch(obj.event){
                case 'addMilepost':
                    addMilepost();
            };
        })
    })


    function addMilepost() {
      // 判断是否中表格
      if(!selectedRowId){
          layer.msg("请先选择阶段");
          return;

      }

        console.log(projectId,"========新增里程===========================");
        var lcurl='/project/projectManager/projectJd/addJdStagePage?projectId='+projectId+'&fbId='+fbId+'&parentId='+parentId;
        console.log(lcurl);
        var w = 800;
        var h = 600;
        layer.open({
            id: 'stage-add',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "新增项目里程",
            content:lcurl,
            yes: function(){
                alert(1111)
            },
            btn2: function(){
                alert(3333)
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                milepostTableIns.reload();
            }
        });
    }

    function queryStage(type) {
        // alert(id)
        var id = id;
        var jsondata = {
            fbId: fbId,
            xmType: type
        };
        parentId=id;
        console.log(jsondata,"0000000000000000000000000");
        table.reload('stageList', {
            where: jsondata
        });
    }


    function queryMilepost(id) {
        // alert(id)
        var id = id;
        var jsondata = {
            parentId: id,
        };
        parentId=id;
        table.reload('milepostList', {
            where: jsondata
        });
    }


    function reset() {
        $('#fileName').val("");
        $('#pcId').val("");
        var jsondata = {
            fileName: "",
            pcId: ""
        };
        table.reload('projectList', {where: jsondata, cols: tableCols});
    }


    function query() {
        var fileName = $('#fileName').val();
        var pcId = $('#pcId').val();
        var jsondata = {
            fileName: fileName,
            pcId: pcId
        };
        table.reload('projectList', {where: jsondata, cols: tableCols});
    }


    /**
     * 删除
     * */
    function deleteFile(id) {
        var checkStatus = table.checkStatus('projectList');
        var data = checkStatus.data;
        //获取选中数量
        var selectCount = checkStatus.data.length;
        if (data.length == 0) {
            layer.msg('请选择文件进行删除。', {icon: 5});
            return false;
        } else {
            var proNames = [];
            for (var i = 0; i < selectCount; i++) {
                proNames.push(checkStatus.data[i].projectName);
            }
            layer.confirm('确定将 ' + proNames + ' 文件删除？', function (index) {
                var ids = [];
                for (var i = 0; i < selectCount; i++) {
                    ids.push(checkStatus.data[i].id);
                }
                var ids = ids.join(',');
                layerAjax("deleteFile", {ids: ids}, "", function (d) {
                    if (d.flag) {
                        layer.msg("操作成功", {icon: 1});
                        tableIns.reload();
                    } else {
                        layer.msg("操作失败", {icon: 2});
                    }
                })
            });
        }
    }


    function saveTableWidth() {
        //把表格的宽度设置到数组里面：
        var theTable = $(".layui-table")[0];
        var theThs = $(theTable).find('th');
        $.each(theThs, function (ind, e) {
            if (ind > 6) {
                return false;
            }
            tableCols[0][ind].width = $(e)[0].clientWidth;
        })
    }




</script>

<script type="text/html" id="shbz">
    {{#  if(d.shbz == '0'){ }}
    停用
    {{#  } else if(d.shbz == '1'){ }}
    正常
    {{#  } else{ }}
    '
    <div class="layui-progress layui-progress-big" lay-showpercent="true">
        <div class="layui-progress-bar layui-bg-orange" lay-percent="222%">111111</div>
    </div><br>'

    {{#  }  }}

</script>


<script type="text/html" id="zt">
    {{#  if(d.status == '000'){ }}
    已删除
    {{#  } else if(d.status == '001'){ }}
    未提交
    {{#  } else if(d.status == '002'){ }}
    未启动
    {{#  } else if(d.status == '004'){ }}
    进行中
    {{#  } else if(d.status == '003'){ }}
    已完成
    {{#  } else if(d.status == '005'){ }}
    未已延期
    {{#  } }}
</script>

</body>

</html>
